<template>
  <vxe-modal
    resize
    esc-closable
    width="30%"
    height="40%"
    showFooter
    v-model="formVisible"
    @hide="formClose"
    :loading="formLoading"
  >
    <template slot="title">
      <span>应用接入配置表单</span>
    </template>
    <template>
      <el-scrollbar class="scrollbar-handle">
        <!-- 主体 -->
        <vxe-form
          ref="firstForm"
          title-width="100"
          title-align="right"
          :data="formEntity"
          :rules="rules"
          span="24"
        >
          <vxe-form-item title="应用授权方" field="B_Authorizer">
            <rayd-select :options="0" v-model="formEntity.B_Authorizer"></rayd-select>
          </vxe-form-item>
          <vxe-form-item title="备注" field="B_Description">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4}"
              maxlength="50"
              show-word-limit
              placeholder="请输入"
              clearable
              v-model="formEntity.B_Description"
            ></el-input>
          </vxe-form-item>
        </vxe-form>
      </el-scrollbar>
    </template>
    <template slot="footer">
      <el-button type="primary" v-form-validate="formSubmit">保存</el-button>
      <el-button @click="formVisible = false">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script>
import { AppConfig,Manaframe } from "@/api";
export default {
  props: {},
  data() {
    return {
      //表单可见
      formVisible: false,
      //表单加载中
      formLoading: false,
      //存放表单ref数组
      formArr: ["firstForm"],
      //表单实体
      formEntity: {},
      //表单验证规则（规则键必须和表单键一致）
      rules: {
        B_Authorizer: [{required: true,message: "请选择应用授权方!"}],
        // B_Authorizer: [
        //   {
        //     required: true,
        //     validator: ({ itemValue, property }) => {
        //       return new Promise((resolve, reject) => {
        //         if (this.util.validateNull(itemValue)) {
        //           reject(new Error("不能为空！"));
        //         } else {
        //           AppConfig.ValidateExist({
        //             id: this.formEntity.B_Id,
        //             field: property,
        //             value: itemValue,
        //           })
        //             .then((res) => {
        //               resolve();
        //             })
        //             .catch((err) => {
        //               reject(new Error("该名称已存在！"));
        //             });
        //         }
        //       });
        //     },
        //   },
        // ],
      },
      /* 实体数据 */
      manaTreeList: [], //组织树型数据
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {},
    //表单开启
    formOpen(row) {
      //打开表单
      this.formVisible = this.formLoading = true;
      if (!row) {
        //新增
      } else {
        //编辑
        this.formEntity = JSON.parse(JSON.stringify(row));
      }
      //获取组织树形数据
      Manaframe.GetTreeList().then((res) => {
        this.manaTreeList = res;
        this.formLoading = false;
      });
    },
    //表单提交
    formSubmit() {
      AppConfig.Save(this.formEntity).then((res) => {
        this.formVisible = false; //关闭弹窗
        this.$emit("refresh"); //刷新表格
      });
    },
    //表单关闭
    formClose() {
      //清除表单验证
      this.util.formClearValid(this.formArr);
      //数据归位
      Object.assign(this.$data, this.$options.data.call(this))
    },
  },
};
</script>
